<template>

    <section class="check-page">
        <Check :toStartBlock='startBlock'  @closeModal="CloseModal" />
        <Table :toTableBlock='tableBlock'  @closeModal="CloseModal" />

        <div class="container">
            <div class="row check_block">
                <div class="content w_3">
                    <div class="check_list white_bg">
                        <div class="check_l1_top relative">
                            <div class="left w_8">
                                <ul class="ul_list">

                                    <li class="list_detail">
                                        <h2>
                                            欧阳安俊
                                            <span class="danger_p font_weight_bolder ">
                                                (A型)
                                            </span>
                                            <span class="middle_p">男 88岁 60KG</span>
                                        </h2>

                                    </li>

                                </ul>
                            </div>

                            <div class="absolute state">
                                <span class="danger">
                                    急症
                                </span>
                                <span class="warning">
                                    感染
                                </span>
                                <span class="warning">
                                    Rh+
                                </span>
                            </div>
                        </div>
                        <div class="bolder_bottom mb_10"></div>
                        <div class="check_l1_middle" :class="{ 'show' : isShow  }">
                            <div class="over_flow_hidden ">
                                <div class="left w_5">
                                    <ul class="ul_list">
                                        <li class="list_lable">
                                            主索引
                                        </li>
                                        <li class="list_detail">
                                            <h2 class=" ">
                                                467048
                                            </h2>

                                        </li>

                                    </ul>
                                </div>
                                <div class="left w_5">
                                    <ul class="ul_list">
                                        <li class="list_lable">
                                            病区
                                        </li>
                                        <li class="list_detail">
                                            <h3 class=" black_p">
                                                四区
                                            </h3>

                                        </li>

                                    </ul>
                                </div>

                            </div>
                            <div class="over_flow_hidden ">
                                <div class="left w_5">
                                    <ul class="ul_list">
                                        <li class="list_lable">
                                            费别
                                        </li>
                                        <li class="list_detail">
                                            <h3 class=" ">
                                                广州医保
                                            </h3>

                                        </li>

                                    </ul>
                                </div>
                                <div class="left w_5">
                                    <ul class="ul_list">
                                        <li class="list_lable">
                                            床号
                                        </li>
                                        <li class="list_detail">
                                            <h3 class=" black_p">
                                                04
                                            </h3>

                                        </li>

                                    </ul>
                                </div>
                            </div>
                            <div class="bolder_bottom mb_10"></div>
                            <div class="over_flow_hidden ">
                                <div class="left w_10">
                                    <ul class="ul_list">
                                        <li class="list_lable">
                                            过敏史
                                        </li>
                                        <li class="list_detail">
                                            <p class="font_weight_bolder black_p">
                                                青霉素过敏
                                            </p>

                                        </li>

                                    </ul>
                                </div>
                            </div>
                            <div class="bolder_bottom mb_10"></div>
                            <div class="over_flow_hidden ">
                                <div class="left w_10">
                                    <ul class="ul_list">
                                        <li class="list_lable">
                                            手术史
                                        </li>
                                        <li class="list_detail">
                                            <p class="font_weight_bolder black_p">
                                                1999年阑尾炎切除术
                                            </p>

                                        </li>

                                    </ul>
                                </div>
                            </div>
                            <div class="bolder_bottom mb_10"></div>
                            <div class="over_flow_hidden ">
                                <div class="left w_10">
                                    <ul class="ul_list">
                                        <li class="list_lable">
                                            术前诊断
                                        </li>


                                    </ul>
                                    <div class="tl mt_10">
                                        <p>1、左眼性老人障碍</p>
                                        <p>2、左眼性老人障碍</p>
                                        <p>3、左眼性老人障碍</p>
                                    </div>

                                </div>
                            </div>
                            <div class="bolder_bottom mb_10"></div>
                            <div class="over_flow_hidden ">
                                <div class="left w_10">
                                    <ul class="ul_list">
                                        <li class="list_lable">
                                            手术方式
                                        </li>


                                    </ul>
                                    <div class="tl mt_10">
                                        <p>1、左眼性老人障碍</p>
                                        <p>2、左眼性老人障碍</p>
                                        <p>3、左眼性老人障碍</p>
                                    </div>

                                </div>
                            </div>
                            <div class="bolder_bottom mb_10"></div>
                            <div class="over_flow_hidden ">
                                <div class="left w_10">
                                    <ul class="ul_list">
                                        <li class="list_lable">
                                            麻醉方式
                                        </li>
                                        <li class="list_detail">
                                            <p class="font_weight_bolder black_p">
                                                全麻
                                            </p>

                                        </li>

                                    </ul>
                                </div>
                            </div>
                            <div class="bolder_bottom mb_10"></div>
                            <div class="over_flow_hidden check_l1_footer" @click="toggle_nav()">
                                <img src="@/assets/img/icon/check/sxsq.png" class="deflaut_icon" alt="icon" />

                            </div>

                        </div>

                        <div class="fixed_nav">
                            <div class="check_msg_content mt_10" :class="{ 'show' : isShow  }">
                                <ul class="check_msg_list">
                                    <li class="check_msg_block">
                                        <img src="@/assets/img/icon/check/message/cj.png" class="icon_hover" alt="icon" />
                                        <p>
                                            采集
                                        </p>
                                    </li>
                                    <li class="check_msg_block">
                                        <img src="@/assets/img/icon/check/message/binglishi.png" class="icon_hover" alt="icon" />
                                        <p>
                                            病例
                                        </p>
                                    </li>
                                    <li class="check_msg_block">
                                        <img src="@/assets/img/icon/check/message/jybg.png" class="icon_hover" alt="icon" />
                                        <p>
                                            检验
                                        </p>
                                    </li>
                                </ul>
                                <ul class="check_msg_list">
                                    <li class="check_msg_block">
                                        <img src="@/assets/img/icon/check/message/bl.png" class="icon_hover" alt="icon" />
                                        <p>
                                            病理
                                        </p>
                                    </li>
                                    <li class="check_msg_block">
                                        <img src="@/assets/img/icon/check/message/cj.png" class="icon_hover" alt="icon" />
                                        <p>
                                            采集
                                        </p>
                                    </li>
                                    <li class="check_msg_block">
                                        <img src="@/assets/img/icon/check/message/pasc.png" class="icon_hover" alt="icon" />
                                        <p>
                                            PACS
                                        </p>
                                    </li>
                                </ul>
                                <ul class="check_msg_list">
                                    <li class="check_msg_block">
                                        <img src="@/assets/img/icon/check/message/cj.png" class="icon_hover" alt="icon" />
                                        <p>
                                            采集
                                        </p>
                                    </li>
                                    <li class="check_msg_block">
                                        <img src="@/assets/img/icon/check/message/xdt.png" class="icon_hover" alt="icon" />
                                        <p>
                                            心电图
                                        </p>
                                    </li>
                                    <li class="check_msg_block">
                                        <img src="@/assets/img/icon/check/message/jc.png" class="icon_hover" alt="icon" />
                                        <p>
                                            检查
                                        </p>
                                    </li>
                                </ul>
                                <ul class="check_msg_list">
                                    <li class="check_msg_block ">
                                        <img src="@/assets/img/icon/check/message/lsyz.png" class="icon_hover" alt="icon" />
                                        <p>
                                            临时医嘱
                                        </p>
                                    </li>
                                    <li class="check_msg_block ">
                                        <img src="@/assets/img/icon/check/message/ghhz.png" class="icon_hover" alt="icon" />
                                        <p>
                                            更换患者
                                        </p>
                                    </li>

                                </ul>

                            </div>
                        </div>


                    </div>
                </div>

                <div class="content w_5">
                    <div class="operative_site white_bg">
                        <div class="operative_site_top">
                            <div class="w_2">
                                <div class>
                                    <div class="circle_process table_display ">

                                        <div class="wrapper right">

                                            <div class="circle rightcircle"></div>

                                        </div>

                                        <div class="wrapper left">

                                            <div class="circle leftcircle" id="leftcircle"></div>

                                        </div>

                                        <div class="table_display_cell">
                                            <p>
                                                正常
                                            </p>
                                            <p>
                                                温度
                                            </p>
                                        </div>


                                    </div>
                                    <div class="circle_process_title">
                                        <p class="left">
                                            正
                                        </p>
                                        <p class="right">
                                            负
                                        </p>
                                    </div>

                                </div>
                            </div>
                            <div class="w_2">
                                <div class>
                                    <div class="circle_process table_display ">

                                        <div class="wrapper right">

                                            <div class="circle rightcircle"></div>

                                        </div>

                                        <div class="wrapper left">

                                            <div class="circle leftcircle" id="leftcircle"></div>

                                        </div>

                                        <div class="table_display_cell">
                                            <p>
                                                正常
                                            </p>
                                            <p>
                                                湿度
                                            </p>
                                        </div>


                                    </div>
                                    <div class="circle_process_title">
                                        <p class="left">
                                            正
                                        </p>
                                        <p class="right">
                                            负
                                        </p>
                                    </div>

                                </div>
                            </div>
                            <div class="w_2">
                                <div class>
                                    <div class="circle_process table_display ">

                                        <div class="wrapper right">

                                            <div class="circle rightcircle"></div>

                                        </div>

                                        <div class="wrapper left">

                                            <div class="circle leftcircle" id="leftcircle"></div>

                                        </div>

                                        <div class="table_display_cell">
                                            <p>
                                                正常
                                            </p>
                                            <p>
                                                氧气压力
                                            </p>
                                        </div>


                                    </div>
                                    <div class="circle_process_title">
                                        <p class="left">
                                            正
                                        </p>
                                        <p class="right">
                                            负
                                        </p>
                                    </div>

                                </div>
                            </div>
                            <div class="w_2">
                                <div class>
                                    <div class="circle_process table_display ">

                                        <div class="wrapper right">

                                            <div class="circle rightcircle"></div>

                                        </div>

                                        <div class="wrapper left">

                                            <div class="circle leftcircle" id="leftcircle"></div>

                                        </div>

                                        <div class="table_display_cell">
                                            <p>
                                                正常
                                            </p>
                                            <p>
                                                负压压力
                                            </p>
                                        </div>


                                    </div>
                                    <div class="circle_process_title">
                                        <p class="left">
                                            正
                                        </p>
                                        <p class="right">
                                            负
                                        </p>
                                    </div>

                                </div>
                            </div>
                            <div class="w_2">
                                <div class>
                                    <div class="circle_process table_display ">

                                        <div class="wrapper right">

                                            <div class="circle rightcircle"></div>

                                        </div>

                                        <div class="wrapper left">

                                            <div class="circle leftcircle" id="leftcircle"></div>

                                        </div>

                                        <div class="table_display_cell">
                                            <p>
                                                正常
                                            </p>
                                            <p>
                                                室内压差
                                            </p>
                                        </div>


                                    </div>
                                    <div class="circle_process_title">
                                        <p class="left">
                                            正
                                        </p>
                                        <p class="right">
                                            负
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="bolder_bottom mb_10"></div>
                        <div class="operative_site_top_bottom">
                            <div class="over_flow_hidden">
                                <div class="left w_4">
                                    <div class="operative_center  ">
                                        <div class="circle_process operation_time table_display ">

                                            <div class="wrapper right">

                                                <div class="circle rightcircle"></div>

                                            </div>

                                            <div class="wrapper left">

                                                <div class="circle leftcircle" id="leftcircle"></div>

                                            </div>

                                        </div>
                                        <div class="operation_time_count">
                                            <p>
                                                预计结束时间<span>13:00</span>
                                            </p>
                                            <h1>
                                                12:00<span>(开始时间)</span>
                                            </h1>
                                        </div>
                                    </div>
                                </div>

                                <div class="left w_2 notice_center ">
                                    <div class="table_display">
                                        <div class="table_display_cell">
                                            <img src="@/assets/img/icon/room/help.png" class="deflaut_icon" alt="icon" />
                                            <div class="themeBtn">
                                                702
                                            </div>
                                        </div>
                                    </div>


                                </div>
                                <div class="left w_2 notice_center_btn" @click="start_ops()">
                                    <img src="@/assets/img/icon/start.png" class="deflaut_icon" alt="icon" />

                                </div>
                                <div class="left w_2 notice_center_btn ">
                                    <img src="@/assets/img/icon/qx.png" class="deflaut_icon" alt="icon" />

                                </div>
                            </div>
                        </div>
                        <div class="operative_site_bottom">
                            <div class=" w_10">
                                <table class="table table-border">
                                    <thead>
                                        <tr>
                                            <th>手术方式</th>
                                            <th>手术部位</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>左眼白内障超声化抽手术;人工晶体一期植入术（IOL)(二级)</td>
                                            <td>
                                                <h1>左眼<span>(OS)</span></h1>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>左眼白内障超声化抽手术;人工晶体一期植入术（IOL)(二级)</td>
                                            <td>
                                                <h1>左眼<span>(OS)</span></h1>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>左眼白内障超声化抽手术;人工晶体一期植入术（IOL)(二级)</td>
                                            <td>
                                                <h1>左眼<span>(OS)</span></h1>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>
                            </div>

                        </div>

                    </div>

                    <div class="operative_site_tab mt_10">
                        <table class="table table-border">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>NIBp</th>
                                    <th>HR</th>
                                    <th>SpO2</th>
                                    <th>Plus</th>
                                    <th>T(c)</th>
                                    <th>ETCO2</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="itme in 2">
                                    <td>8:30</td>
                                    <td>120/60</td>
                                    <td>70</td>
                                    <td>100</td>
                                    <td>70</td>
                                    <td>36.5</td>
                                    <td></td>
                                    <td></td>
                                </tr>


                            </tbody>
                        </table>
                    </div>

                </div>

                <div class="content w_2 ">
                    <div class="dc_config white_bg">
                        <div class="mb_10">
                            <ul class="ul_list">
                                <li>
                                    扫描录入
                                </li>
                                <li>
                                    <div class="bolder_box"></div>
                                </li>

                            </ul>

                        </div>
                        <div class="dc_config_content" ref="dc_config_content">
                            <ul>
                                <li :class="chose_list" @click="toggleTable(0)">
                                    <img src="@/assets/img/icon/room/hc.png" class="deflaut_icon" alt="icon" />

                                    <img src="@/assets/img/icon/room/hcs.png" class="active_icon" alt="icon" />
                                    <p>
                                        耗材
                                    </p>
                                </li>
                                <li :class="chose_list" @click="toggleTable(1)">
                                    <img src="@/assets/img/icon/room/yp.png" class="deflaut_icon" alt="icon" />
                                    <img src="@/assets/img/icon/room/yps.png" class="active_icon" alt="icon" />
                                    <p>
                                        灭菌
                                    </p>
                                </li>
                                <li :class="chose_list" @click="toggleTable(2)">
                                    <img src="@/assets/img/icon/room/mj.png" class="deflaut_icon" alt="icon" />
                                    <img src="@/assets/img/icon/room/mjs.png" class="active_icon" alt="icon" />
                                    <p>
                                        药品
                                    </p>
                                </li>
                                <li :class="chose_list" @click="toggleTable(3)">
                                    <img src="@/assets/img/icon/room/sb.png" class="deflaut_icon" alt="icon" />
                                    <img src="@/assets/img/icon/room/sbs.png" class="active_icon" alt="icon" />
                                    <p>
                                        设备
                                    </p>
                                </li>


                            </ul>
                        </div>
                    </div>
                    <div class="dc_config_bottom mt_10">
                        <div class="white_bg">
                            <div class="arrange_title">
                                <h1>医护人员</h1>
                            </div>
                            <table class="table table-border">
                                <tr>
                                    <td rowspan="2" class="bg_theme">
                                        <p>医</p>
                                        <p>生</p>
                                    </td>
                                    <td>
                                        <p>手术</p>
                                        <p>医生</p>
                                    </td>
                                    <td>
                                        <p>何妙春（四级）</p>
                                        <p>何妙春（四级）</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <p>麻醉</p>
                                        <p>医生</p>
                                    </td>
                                    <td>
                                        顾安然/顾安然
                                    </td>
                                    　　
                                </tr>


                                <tr>
                                    <td class="bg_theme">
                                        <p>助</p>
                                        <p>手</p>
                                    </td>
                                    <td colspan="2">
                                        顾安然，顾安然，顾安然
                                    </td>
                                </tr>

                                <tr>
                                    <td rowspan="2" class="bg_theme">
                                        <p>助</p>
                                        <p>手</p>
                                    </td>
                                    <td>
                                        <p>手术</p>
                                        <p>医生</p>
                                    </td>
                                    <td>
                                        <p>何妙春（四级）</p>
                                        <p>何妙春（四级）</p>
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <p>助</p>
                                        <p>手</p>
                                    </td>
                                    <td>
                                        顾安然，顾安然，顾安然
                                    </td>
                                </tr>






                            </table>
                        </div>
                    </div>

                </div>


            </div>


        </div>

    </section>


</template>

<script lang="ts">
    import {
        Component,
        Vue
    } from 'vue-property-decorator';

    import Check from '@/components/modal/check/Check.vue';
    import Table from '@/components/modal/table/Table.vue';
  
    @Component({

        components: {
            Check,
            Table
        },

    })

    export default class Patient_Check extends Vue {
        chose_list = "";
        eye_img = require('@/assets/img/button/r_eye.png');
        step = "1";
        
        startBlock = false;
        tableBlock = false;
        isShow=false;
        tableType=0;


        created() {

        }

        start_ops(){
           
            this.startBlock=true;
        }
        CloseModal() {
            this.startBlock = false;
            this.tableBlock = false;
        }

        concel_ops() {
            
        }

        toggle_nav(){
            if(this.isShow){
                this.isShow=false;
            }else{
                this.isShow=true;
            }
        }

        toggleTable(type:any){
            this.tableBlock = true;
            this.tableType=type;
        }

    }
</script>

<style lang="scss" scoped>
    .check-page {
        .container {
            background: $bgColor;
            padding: 0;

            .row {
                .content {
                    padding-right: 0;
                    overflow: auto;

                    .white_bg {

                        overflow: auto;
                        background: $content_bgColor;
                        @include box_shadow;
                        padding: 0.1rem;
                    }



                    .ul_list {
                        .list_detail {
                            color: $themecolor;
                            padding-left: 5px;

                            .middle_p {
                                font-size: $middle_p;
                            }
                        }
                    }

                    .check_l1_top {
                        .ul_list {
                            height: 60px;
                        }

                        overflow:hidden;

                        .state {
                            right: 0;
                            color: $color;
                            top: 0;
                            bottom: 0;
                            margin: auto;
                            height: 20px;

                            span {
                                font-size: $small_p;
                                padding: 3px;
                                // border-radius: 5px;
                                margin-bottom: 5px;
                                margin-right: 3px;
                            }

                        }
                    }

                    .check_l1_middle {
                        overflow: hidden;

                        .over_flow_hidden {
                            margin-bottom: 10px;

                            .ul_list {
                                height: 30px;

                                .list_lable {

                                    width: 80px;
                                    background: $themecolor;
                                    color: $color;
                                    font-size: 0.16rem;
                                }
                            }
                        }
                    }

                    .check_l1_footer {
                        text-align: left;

                        img {
                            width: 35px;
                        }
                    }

                    .fixed_nav {
                        position:relative;
                        .check_msg_content {
                            display:none;
                            position: absolute;
                            width: 60%;
                            bottom: 50px;
                            background: #060606ab;
                            padding: 0.1rem;
                            .check_msg_list {
                                margin-bottom: 3%;

                                .check_msg_block {
                                    background: $blue_color;
                                    width: 30%;
                                    margin-right: 3%;
                                    padding: 2px;

                                    p {
                                        color: $color;
                                        font-size: 0.1rem;
                                        font-weight: bolder;
                                    }

                                    img {
                                        width: 40px;
                                    }

                                    &:last-child {
                                        margin-right: 0;
                                    }
                                }

                                &:last-child {
                                    .check_msg_block {
                                        margin-right: 3%;

                                        &:last-child {
                                            width: 65%;
                                            margin-right: 0;
                                            background: $warning_color;
                                        }
                                    }
                                }
                            }
                        }
                    }


                }

                .operative_site {
                    padding: 0 !important;

                    .w_2 {
                        position: relative;
                        float: left;
                    }

                    .operative_site_top {
                        overflow: hidden;
                        padding: 20px 0;

                    }

                    .operative_site_top_bottom {
                        margin: 20px 0;

                        .operation_time {
                            transform: rotate(-90deg);
                            margin: 0;
                            width: 120px;
                            height: 120px;

                            margin-left: 0px;
                            margin-bottom: 0px;

                            .wrapper {
                                width: 120px;
                                height: 120px;
                            }

                            .circle {
                                width: 120px;
                                height: 120px;
                            }

                            .leftcircle {
                                transform: rotate(130deg);
                            }

                            .rightcircle {
                                transform: rotate(-40deg);
                            }
                        }

                        .operative_center {
                            position: relative;
                            width: 200px;
                            margin: auto;

                            .operation_time_count {
                                position: absolute;
                                top: 0;
                                right: 0;
                                height: 100%;
                                width: 100%;
                                text-align: right;

                                p {
                                    font-size: 10px;
                                }

                                h1 {
                                    font-size: 30px;
                                    position: absolute;
                                    bottom: 0;
                                    right: 0;

                                    span {
                                        font-size: 14px;
                                    }
                                }
                            }
                        }

                        .notice_center {
                            height: 110px;
                            padding: auto 10px;

                            .table_display {
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                left: 0;
                                right: 0;
                            }

                            img {
                                width: 60px;
                            }

                            .themeBtn {
                                color: #fff;
                                font-size: 0.25rem;
                                background: $themecolor;
                            }
                        }

                        .notice_center_btn {
                            height: 110px;
                            padding: auto 10px;

                            img {
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                left: 0;
                                right: 0;
                                margin: auto;
                            }
                        }
                    }

                    .operative_site_bottom {
                        .table {

                            th {
                                background: $themecolor;
                                color: $color;
                            }

                            tr:first-child {
                                td {
                                    color: $themecolor;
                                    height: 80px;
                                    // font-size:0.2rem;
                                }
                            }

                            td {
                                background: $color;
                            }
                        }
                    }

                    .people_img {
                        height: 270px;

                        .eye_btn {
                            position: absolute;
                            right: 0;
                            top: 21px;
                            cursor: pointer;
                        }
                    }

                    .table_display {
                        position: relative;
                        margin: auto;
                        font-weight: bold;
                        width: 80px;
                        margin: auto;
                    }

                    .circle_process_title {
                        position: absolute;
                        top: 0;
                        width: 85px;
                        font-weight: bold;
                        margin: auto;
                        left: 0;
                        right: 0;
                    }
                }

                .dc_config {
                    padding: 0 !important;

                    .btn {
                        border-radius: 5px;
                    }

                    .ul_list {
                        width: 100%;

                        li {
                            padding: 0.1rem;
                        }
                    }

                    li {
                        width: 50%;
                        padding: 5px;
                        font-size: 0.2rem;
                        background: $themecolor;
                        color: $color;
                        cursor: pointer;

                        .bolder_box {
                            width: 120px;
                            border-color: $color;
                        }
                    }

                    .dc_config_content {
                        ul {
                            li {
                                width: 50%;
                                padding: 0.1rem;
                                background: $color;
                                color: $themecolor;
                                border-right: 1px solid $bgColor;
                                border-bottom: 1px solid $bgColor;

                                p {
                                    color: $themecolor;
                                }

                                cursor: pointer;

                                .bolder_box {
                                    width: 120px;
                                }

                                p {
                                    font-size: $small_p;
                                }

                                img {
                                    width: 50%;
                                    margin: auto;

                                }

                                .active_icon {
                                    display: none;
                                }

                            }

                            .chose_list {
                                .deflaut_icon {
                                    display: none;
                                }

                                .active_icon {
                                    display: block;
                                }
                            }

                        }
                    }
                }

                .dc_config_btn {
                    .table_block_cell {
                        button {
                            padding: 20px 0;
                            margin-bottom: 20px;

                        }

                        button:nth-child(1) {
                            background: $color_state_start;
                            color: $color;

                            &.active {
                                background: $warning_color;
                            }
                        }

                        button:nth-child(2) {
                            @extend .btn_defalut;
                        }

                        button:nth-child(3) {
                            @extend .btn_black;
                        }
                    }

                }

                .check_count {
                    .check_count_top {
                        .ul_list {
                            margin-bottom: 10px;

                            li {
                                font-size: $small_p;
                                text-align: left;

                                img {
                                    width: 22px;

                                }

                                &:nth-child(1) {

                                    width: 60%;
                                }

                                &:nth-child(3) {
                                    text-align: left;
                                    color: $themecolor;
                                }
                            }
                        }
                    }

                    .count_center_box {
                        p {
                            font-size: $small_p;
                            text-align: left;
                            margin-bottom: 5px;
                        }

                        .center_box_text {
                            @include bolder;
                            height: 85px;
                            text-align: left;
                        }
                    }
                }

            }

            //下半部分
            .check_block_bottom {
                .content {
                    padding-top: 0;

                    .white_bg {

                        padding: 0.05rem;
                    }

                    .check_msg {
                        .check_msg_title {
                            p {
                                font-size: $small_p;
                            }
                        }

                        .check_msg_content {
                            
                            .check_msg_list {
                                margin-bottom: 3%;

                                .check_msg_block {
                                    background: $blue_color;
                                    width: 32%;
                                    margin-right: 1%;
                                    padding: 2px;

                                    p {
                                        color: $color;
                                        font-size: 0.1rem;
                                        font-weight: bolder;
                                    }

                                    img {
                                        width: 25px;
                                    }

                                    &:last-child {
                                        margin-right: 0;
                                    }
                                }

                                &:last-child {
                                    .check_msg_block {
                                        margin-right: 1%;

                                        &:last-child {
                                            width: 65%;
                                            margin-right: 0;
                                            background: $warning_color;
                                        }
                                    }
                                }
                            }
                        }

                    }

                    .check_project {
                        padding: 0.1rem;

                        .check_project_list {
                            .ul_list {
                                li {
                                    button {
                                        margin-right: 5px;
                                        @extend .btn_white;
                                        @extend .btn_small;
                                        @extend .btn_radius_small;
                                        border-color: $grey_p;
                                        color: $grey_p;

                                        &.active {
                                            border-color: $themecolor;
                                            color: $color;
                                        }
                                    }
                                }
                            }
                        }

                        .table {
                            font-size: 0.1rem;

                            tbody {
                                tr:nth-child(2) {
                                    background: #e8f7f4;
                                }

                                tr:nth-child(3) {
                                    td:first-child {
                                        border-bottom: 1px solid #cbcbcb;
                                    }
                                }
                            }
                        }
                    }

                    .check_life {
                        .table {
                            font-size: 0.1rem;

                            tbody {
                                tr:nth-child(2) {
                                    background: #e8f7f4;
                                }
                            }
                        }
                    }


                }
            }

            .check_block {
                .content:last-child {
                    padding-right: 0.1rem;
                }
            }

            //圆环

        }

        .operative_site_tab {
            table {
                thead {
                    tr {
                        th {
                            background: $themecolor;
                            color: $color;
                        }
                    }

                }

                td {
                    background: $color;
                }
            }
        }

        .dc_config_bottom {
            .white_bg {
                padding: 0 !important;
            }

            .arrange_title {
                h1 {
                    padding: 0.1rem;
                }


            }

            .table tr {
                .bg_theme {
                    background: $themecolor;
                    width: 60px;

                    p {
                        color: $color;
                        padding: 0px;
                    }
                }
            }

            h1 {
                color: $color;
                background: $themecolor;
            }
        }
    }
</style>